<template>
  <div>
    <!-- <div class="container" v-if="followInfo.type == 2">
      <div class="container-top">
        <div class="container-top-img">
          <img :src="followInfo.header" alt="" />
        </div>
        <div class="container-top-center">
          <div class="container-top-true">
            <div class="commentTop">
              <div class="container-top-title">
                <div class="container-top-one">
                  <span>{{ followInfo.nick_name }}</span>
                  <div class="container-lable-yd">
                    <span>{{ authent.title }}</span>
                  </div>
                </div>
                <div class="container-top-two">{{ followInfo.creattime }}</div>
              </div>
              <div v-if="myself == mid" class="del">删除</div>
              <div v-if="myself !== mid" class="fllow">+关注</div>
            </div>
            <div class="container-contoin">{{ followInfo.content }}</div>
            <video :src="videoInfo.video" controls class="video-box"></video>
            <div v-if="followInfo.statu == 2" class="container-video">
              <video class="video-bb" :src="followInfo.video"></video>
            </div>
          </div>
        </div>
      </div>
      <div class="container-but">
        <div class="ribbon">
          <Icon type="ios-star-outline" /> <span>{{ followInfo.is_zf }}</span>
        </div>
        <div class="ribbon">
          <Icon type="ios-star-outline" /> <span>{{ followInfo.is_comits }}</span>
        </div>
        <div class="ribbon">
          <Icon type="ios-star-outline" /> <span>{{ followInfo.is_sc }}</span>
        </div>
        <div class="ribbon npk">
          <Icon type="ios-star-outline" /> <span>{{ followInfo.is_like }}</span>
        </div>
      </div>
    </div> -->
    <div class="container">
      <div class="container-top">
        <div class="container-top-img">
          <!-- <img :src="followInfo.face" alt="" /> -->
          <Avatar
          @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                shape="circle"
                :src="followInfo.face"
                icon="ios-person"
                size="28"
              />
        </div>
        <div class="container-top-center">
          <div class="container-top-true">
            <div class="commentTop">
              <div class="container-top-title">
                <div class="container-top-one">
                  <span>{{ followInfo.nick_name }}</span>
                  <div class="container-lable-yd">
                    <span>{{ followInfo.title }}</span>
                  </div>
                </div>
                <div class="container-top-two">{{ followInfo.creattime }}</div>
              </div>
              <div v-if="foucsid == mid" class="del" @click="deltopic">
                删除
              </div>
              <div
                v-if="foucsid !== mid && followInfo.haved == 0"
                class="fllow"
                @click="follow(1)"
              >
                +关注
              </div>
              <div
                v-if="foucsid !== mid && followInfo.haved == 1"
                class="fllow"
                @click="follow(0)"
              >
                +取消关注
              </div>
            </div>
            <div class="container-contoin">{{ followInfo.content }}</div>
            <div class="main-container" v-if="(followInfo.thumbs&&followInfo.thumbs.length > 0)">
              <img
                class="main-img"
                :src="item"
                @click="handleShowBigImg(item)"
                v-for="(item, index) in followInfo.thumbs"
                :key="index"
                alt=""
              />


              <!-- <img class="main-img" src="@/assets/header.jpg" alt="" />
              <img class="main-img" src="@/assets/header.jpg" alt="" />
              <img class="main-img" src="@/assets/header.jpg" alt="" />
              <img class="main-img" src="@/assets/header.jpg" alt="" />
              <img class="main-img" src="@/assets/header.jpg" alt="" /> -->
            </div>
            <div class="container-video" v-if="followInfo.video_url">
              <video
                controls
                class="video-bb"
                :src="followInfo.video_url"
              ></video>
            </div>
          </div>
        </div>
      </div>
      <div class="container-but">
        <div class="ribbon" @click="collect(followInfo.id, 2)">
          <!-- <Icon type="ios-star-outline" /> <span>{{ followInfo.is_sc }}</span> -->
          <Icon :type="followInfo.havesc===1? 'md-star':'ios-star-outline'"
             :color="followInfo.havesc===1?'#FDCD10':''" /> <span>{{ followInfo.is_sc }}</span>
        </div>
        <div class="ribbon" @click="collect(followInfo.id, 3)">
          <Icon type="ios-share-outline" /> <span>{{ followInfo.is_zf }}</span>
        </div>
        <div class="ribbon">
          <Icon type="ios-text-outline" />
          <span>{{ followInfo.is_comits }}</span>
        </div>
        <div class="ribbon npk" @click="collect(followInfo.id, 1)">
          <Icon type="ios-thumbs-up-outline" />
          <span>{{ followInfo.is_like }}</span>
        </div>
      </div>
    </div>
    <div class="comment">
      <div class="comment-box" v-if="commentFlag1 == false">
        <div class="comment-btn" @click="comment1">
          <div class="btn">发表评论</div>
          <img class="commentimg" src="@/assets/communityimg/edit.png" alt="" />
        </div>
      </div>
      <!-- 一级评论 -->
      <div class="comment1-box" v-if="commentFlag1">
        <textarea
          v-model="commentValue"
          placeholder="快来说说感受吧"
          class="textarea"
        ></textarea>
        <div class="btn-box">
          <div class="close" @click="closecomment1">取消</div>
          <div class="sub" @click="subcomment">提交</div>
        </div>
      </div>
    </div>
    <div class="comment-top">
      <div class="comment-top-left">评论{{ commentsnum }}</div>
      <div class="check">
        <div @click="checktype(0)" :style="{color:defultType === 0 ? '':'#dedede'}">按推荐</div>
        <span class="line"></span>
        <div @click="checktype(1)" :style="{color:defultType === 1 ? '':'#dedede'}">按时间</div>
      </div>
    </div>
    <div class="comment-main">
      <div
        v-for="(item, index) in commentList"
        :key="index"
        class="comment-item"
      >
        <div class="comment-item-top">
          <div class="comment-left">
            <!-- <img class="creatHeader" :src="item.face" alt="" /> -->
            <Avatar
            @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                shape="circle"
                :src="item.face"
                icon="ios-person"
                size="28"
              />
            <div class="creatInfo">
              <div>{{ item.nick_name }}</div>
              <div>{{ item.createime }}</div>
            </div>
          </div>
          <div class="comment-top-right">
            <div @click="comment(item.id)">
              <img src="@/assets/communityimg/comments.png" alt="" />
              <div>{{ item.is_dis }}</div>
            </div>
            <div @click="likeComment(item.id)">
              <img src="@/assets/communityimg/praise.png" alt="" />
              <div>{{ item.is_like }}</div>
            </div>
          </div>
        </div>
        <div class="text">
          {{ item.content }}
        </div>
        <div v-if="firstId == item.id && commnetFlag">
          <textarea
            v-model="commentValue2"
            name=""
            :placeholder="'回复'+item.nick_name"
            id=""
            class="comment2"
          ></textarea>
          <div class="submit">
            <div class="sub" @click="subcomment2">提交</div>
          </div>
        </div>
        <!-- 子评论 -->
        <div class="child-comment">
          <div
            v-for="(v, i) in item.childs.childs"
            :key="i"
            class="child-comment-item"
          >
            <div class="comment-item-top">
              <div class="comment-left">

                <!-- <img class="creatHeader" :src="v.face" alt="" /> -->
                <Avatar
                shape="circle"
                @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                :src="v.face"
                icon="ios-person"
                size="28"
              />
                <div class="creatInfo">
                  <div>{{ v.nick_name }}</div>
                  <div>{{ v.createime }}</div>
                </div>
              </div>
              <div class="comment-top-right">
                <div @click="childComment(v.id)">
                  <div>回复</div>
                </div>
                <div @click="likeComment(v.id)">
                  <img src="@/assets/communityimg/praise.png" alt="" />
                  <div>{{ v.is_like }}</div>
                </div>
              </div>
            </div>
            <div class="text">
              {{ v.content }}
            </div>
            <div v-if="firstId == v.id && commnet2Flag">
              <textarea
                v-model="commentValue2"
                name=""
                :placeholder="'回复'+item.nick_name"
                id=""
                class="comment2"
              ></textarea>
              <div class="submit">
                <div class="sub" @click="subcomment2">提交</div>
              </div>
            </div>
          </div>
          <!-- <div class="lookall">查看全部回复</div> -->
        </div>
      </div>
    </div>
    <Modal
    width="800px"
                  v-model="bigImgModel"
                  @on-visible-change="handleVisible"
                  footer-hide
                >
                <img
                class="bigUrl"
                :src="bigUrl"
                alt=""
              />
              </Modal>
  </div>
</template>

<script>
import {
  seedetail,
  replaycomits,
  followUser,
  setdlc,
  likecomment,
  delTopic,
} from "@/api/community";
import { time } from "@/config/time";
export default {
  data() {
    return {
      bigImgModel: false,
      bigUrl:'',
      videoInfo: { },
      followInfo: { },
      comment2: "",
      commnet2Flag: false,
      commnetFlag: false,
      commentList: [],
      commentArr: [],
      checkchild: 0,
      firstId: 0,
      myself: "",
      type: 0,
      commentFlag1: false,
      mid: JSON.parse(localStorage.userInfo).id,
      topicId: 0,
      defultType: 0,
      foucsid: 0,
      authent: {}, //发帖者信息
      commentValue: "", //一级评论内容
      commentValue2: "", //二级评论内容
      commentsnum: 0,
    };
  },
  created() {
    this.foucsid = this.$route.query.foucsid;
    this.topicId = this.$route.query.id;
    this.getTopicInfo();
    // this.type = this.$route.query.type;
  },
  methods: {
    handleShowBigImg(url) {
      this.bigUrl = url
      this.bigImgModel  =true
    },
    handleVisible(val) {
      if(!val) {
        this.bigUrl = ''
      }
    },
    gitCommentsArr(arr) {
      if (arr instanceof Array) {
        return;
      }
      Object.keys(arr).forEach((item) => {
        this.commentArr = [...this.commentArr, arr[item]];
        this.gitCommentsArr(arr[item].child);
      });
    },
    // 获取帖子详情
    getTopicInfo() {
      let data = {
        id: this.topicId,
        // id: 2,
        mid: this.mid,
        sort_type: this.defultType,
      };
      seedetail(data).then((res) => {
        if (res.code == 1) {
          this.commentsnum = res.comments_num;
          this.foucsid = res.data.aouthid;
          this.followInfo = res.data;

          // this.authent = res.data.authent;
          if (res.data.thumbs) {
            this.followInfo.thumbs = res.data.thumbs.split(",");
          }
          this.followInfo.creattime = time.getallTime(
            this.followInfo.creattime
          );
          res.comments.forEach((v) => {
            v.createime = time.getallTime(v.createime);
            v.childs.childs.map((v2) => {
              v2.createime = time.getallTime(v2.createime);
            });
          });
          this.commentList = res.comments;
        }
      });
    },
    // 关注贴主
    follow(type) {
      let data = {
        mid: this.mid,
        foucsid: this.foucsid,
        type: type,
      };
      followUser(data).then((res) => {
        if (res.code == 1) {
          this.getTopicInfo();
        }
      });
    },
    // 删除帖子
    deltopic() {
      let data = {
        mid: this.mid,
        id: this.topicId,
      };
      delTopic(data).then((res) => {
        if (res.code == 1) {
          this.$router.push({
            path: "/follow",
          });
        }
      });
    },
    // 一键三连
    collect(id, type) {
      let data = {
        topicid: id,
        type: type,
        // mid: uni.getStorageSync("user_info_obj_dev").id,
        mid: this.mid,
      };
      setdlc(data).then((res) => {
        if (res.code == 1) {
          this.getTopicInfo();
        }
      });
    },
    // 点赞评论
    likeComment(id) {
      let data = {
        cid: id,
        // mid: uni.getStorageSync("user_info_obj_dev").id,
        mid: this.mid,
      };
      likecomment(data).then((res) => {
        if (res.code == 1) {
          this.getTopicInfo();
        }
      });
    },
    // 按推荐和时间排序
    checktype(type) {
      this.defultType = type;
      this.getTopicInfo();
    },
    // 发布一级评论
    subcomment() {
      let data = {
        cid:0,
        mid: this.mid,
        topicid: this.topicId,
        content: this.commentValue,
      };
      replaycomits(data).then((res) => {
        if (res.code == 1) {
          this.commentValue = "";
          this.getTopicInfo();
        }
      });
    },
    // 回复评论
    subcomment2() {
      let data = {
        cid: this.firstId,
        mid: this.mid,
        topicid: this.topicId,
        content: this.commentValue2,
      };
      replaycomits(data).then((res) => {
        if (res.code == 1) {
          this.commentValue2 = "";
          this.commnetFlag = false;
          this.commnet2Flag = false;
          this.getTopicInfo();
        }
      });
    },
    childComment(id) {
      this.firstId = id;
      this.commnet2Flag = !this.commnet2Flag;
    },
    comment(id) {
      this.firstId = id;
      this.commnetFlag = !this.commnetFlag;
    },
    comment1() {
      this.commentFlag1 = !this.commentFlag1;
    },
    closecomment1() {
      this.commentFlag1 = !this.commentFlag1;
    },
  },
};
</script>

<style lang="scss" scoped>
.bigUrl {
  width: 100%;
  max-height: 600px;
  object-fit: scale-down;
}
.container {
  width: 100%;
  // height: 350px;
  border-radius: 6px;
  background-color: #fff;

  .container-top {
    width: 100%;
    // height: calc(350px - 36px);
    padding-top: 12px;
    display: flex;
    justify-content: flex-start;
    .container-top-img {
      width: 28px;
      height: 100%;
      margin-left: 12px;
      > img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }
    }
    .container-top-center {
      width: 100%;
      height: 100%;

      padding-right: 45px;
      .container-top-true {
        width: 100%;
        height: 100%;
        .commentTop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .fllow,
          .del {
            color: #fd5151;
            padding: 3px 10px;
            border: 1px solid #fd5151;
            border-radius: 12px;
            cursor: pointer;
          }
          .container-top-title {
            // width: 100%;
            height: 38px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 9px;
            .container-top-one {
              width: 100%;
              height: 14px;
              font-size: 8px;
              font-weight: 500;
              color: #333333;
              display: flex;
              align-items: center;
              justify-content: flex-start;

              .container-lable-yd {
                width: auto !important;
                padding: 0 6px;
                height: 11px;
                background: #fcf0f0;
                border-radius: 2px;
                width: 20px;
                font-size: 7px;
                font-weight: 400;
                color: #fd5151;
                line-height: 11px;
                margin-left: 10px;
              }
            }
            .container-top-two {
              width: 100%;
              height: 14px;
              font-size: 7px;

              font-weight: 400;
              color: #acacac;
            }
          }
        }
        .container-contoin {
          margin-bottom: 12px;
          font-size: 8px;
          font-weight: 400;
          color: #333333;
          line-height: 14px;
        }
        .video-box {
          width: 100%;
          height: 150px;
        }
        .main-container {
          width: 100%;
          // height: 180px;
          // background-color: #FD5151;
          display: flex;
          flex-wrap: wrap;
          .main-img {
            width: 32%;
            display: inline-block;
            height: 86px;
            border-radius: 3px;
            margin-bottom: 7px;
            object-fit: scale-down;
            background-color: #dedede;
          }
        }
        .container-video {
          width: 100%;
          margin: 20px 0;
          // height: 313px;
          .video-bb {
            width: 100%;
            max-height: 200px;
          }
        }
      }
    }
  }
  .container-but {
    widows: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ececec;
    .ribbon {
      width: 25%;
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #ececec;
    }
    .npk {
      border-right: none;
    }
  }
}
.comment {
  margin-top: 30px;
  .comment-box {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 0 10px;
    .comment-btn {
      border-radius: 4px;
      display: flex;
      padding: 5px 10px;
      align-items: center;
      background-color: #fd5151;
      .btn {
      }
      .commentimg {
        width: 16px;
      }
    }
  }
  .comment1-box {
    width: 80%;
    height: 150px;
    margin: 0 auto;
    margin-top: 10px;
    .textarea {
      background-color: #fff;
      width: 100%;
      border: none;
      outline: none;
      height: 100%;
    }
    .btn-box {
      display: flex;
      justify-content: right;
      margin-top: 5px;
      > div {
        margin: 0 10px;
      }
      .close {
        color: #fd5151;
        padding: 5px 15px;
        border: 1px solid #fd5151;
        border-radius: 4px;
      }
      .sub {
        color: #fff;
        background-color: #fd5151;
        padding: 5px 15px;
        border-radius: 4px;
      }
    }
  }
}
.comment-top {
  padding: 10px;
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  .comment-top-left {
    display: flex;
    align-items: center;
  }
  .comment-top-left::before {
    margin-right: 10px;
    display: block;
    content: "";
    height: 20px;
    width: 2px;
    background-color: #fd5151;
  }
  .check {
    display: flex;
    .line {
      width: 2px;
      height: 15px;
      background-color: #878583;
      margin: 0 15px;
    }
  }
}
.comment-main {
  background-color: #fff;
  .comment-item {
    // display: flex;
    padding: 0 20px;
    align-items: center;
    margin-top: 20px;
    .comment2 {
      height: 100px;
      width: 100%;
      border: 1px solid #ccc;
      outline: none;
      padding: 10px;
      background-color: #fff;
    }
    .submit {
      position: relative;
      .sub {
        position: absolute;
        right: 0;
        width: 40px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #fd5151;
        color: #fff;
      }
    }
    .comment-item-top {
      display: flex;
      justify-content: space-between;
      .comment-left {
        display: flex;
        align-items: center;
        .creatHeader {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .creatInfo {
          display: flex;
          flex-direction: column;
          //   align-items: center;
        }
      }
      .comment-top-right {
        display: flex;
        align-items: center;
        > div {
          margin: 0 10px;
          display: flex;
          color: #ccc;
          img {
            width: 17px;
            height: 17px;
            margin-right: 5px;
          }
        }
      }
    }
    .text {
      padding: 0 20px;
      margin-top: 20px;
    }
    .child-comment {
      width: 90%;
      margin: 0 auto;
      padding: 10px;
      .child-comment-item {
        margin-top: 20px;
        .comment2 {
          height: 100px;
          width: 100%;
          border: 1px solid #ccc;
          outline: none;
          padding: 10px;
          background-color: #fff;
        }
        .submit {
          position: relative;
          .sub {
            position: absolute;
            right: 0;
            width: 40px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: #fd5151;
            color: #fff;
          }
        }
      }
    }
    .lookall {
      text-align: center;
      margin-top: 30px;
      color: #2f7de7;
    }
  }
}
</style>
